import React,{useState} from 'react'
import { Form, Input, Modal, Select, message,Row ,Col, Button,DatePicker,Dropdown} from 'antd';
import request from '@/http';
import SecurityService from '@/pages/login/service';
const { Option } = Select;
import { DownOutlined, UserOutlined } from '@ant-design/icons';
import { valueToNode } from '@babel/types';
import Item from 'antd/lib/list/Item';
import moment from 'moment';

interface EditObject {
  id?:Int16Array,
  isModalVisible: boolean,
  userName?: string,
  userSex?: string,
  userAge?: string,
  userTelphone?: any
}

const Edit=(props: { editObject: EditObject; onClose: any })=> {
  const { editObject, onClose } = props;
  const [isModalVisible, setIsModalVisible] = React.useState(false);
  const [formObject] = Form.useForm();
  const [dicData,setDicData]=React.useState<any>([])

  const modelOnCancel = () => {
    setIsModalVisible(false);
  };

  const [courseName, setcourseName] = useState<
  { key: number; name: string; id: number }[]
>([]);
  const [userName, setuserName] = useState<
    { key: number; name: string; id: number }[]
  >([]);
  const loadDic = async () => {
    await request
      .get('/api/Course/GetAllCourse')
      .then((response: any) => {
        if (response.code == 200) {
          const data = response.data.map((item: any, index: number) => ({
            key: item.courseId,
            id: item.id,
            name: item.courseName,
          }));
          console.log(response)
          setcourseName(data);
        } else {
          message.error(response.message);
        }
      });

      await request
      .post('/api/Users/GetAllUsers',{role:1})
      .then((response: any) => {
        if (response.code == 200) {
          const data = response.data.map((item: any, index: number) => ({
            key: item.userId,
            id: item.id,
            name: item.userName,
          }));
          setuserName(data);
        } else {
          message.error(response.message);
        }
      });
  };

  React.useEffect(() => {
    // console.log(editObject);
    loadDic();
    setIsModalVisible(editObject.isModalVisible);
    formObject.setFieldsValue({
      ...editObject
    });
  }, [editObject]);

  
    

  return (
    <>
      <Modal
        width={800}
        title='学生信息维护'
        visible={isModalVisible}
        onCancel={modelOnCancel}
        maskClosable={false}
        destroyOnClose
        style={{ top: '20vh' }}
        footer={false}
      >
        <Form name="editForm" preserve={false} form={formObject} onFinish={async(values: any) =>{
          if(!editObject.id){
            console.log(values)
            await request.post('/api/Batch/AddBatch?users='+values.userName+'&'+'courses='+values.courseName, 
              { 
                state:0,
                batchName:values.batchName,
                beginTime:values.beginTime,
                endTime:values.endTime
            }).then((response:any)=>{
              console.log(response)
              if(response.code==200){
                console.log(response)
                message.success(response.message);
                onClose();
                setIsModalVisible(false);
              }else{
                message.success(response.message);
              }
              console.log(response)
            })
          }else{
            console.log('!!')
            await request.post('/api/Batch/batchDelete',{userTelphone:values.userTelphone,userSex:values.userSex,account:values.userTelphone,state:0,password:'123456',role:1,userAge: parseInt(values.userAge),userName:values.userName,id:editObject.id}).then((response:any)=>{
              if(response.code==200){
                message.success(response.message);
                onClose();
                setIsModalVisible(false);
              }else{
                message.success(response.message);
              }
            })
          }
          
        }}>
          <Row gutter={24} justify='center' >
            <Col span={10} key='1'>
              <Form.Item
                label="批次名称"
                name="batchName"
                rules={[
                  { required: true, message: '不能为空!' }
                  ]}
              >
                <Input placeholder="请录入" />
              </Form.Item>
            </Col>
            <Col span={10} key='2'>
              <Form.Item
                label="开始时间"
                name="beginTime"
                rules={[
                  { required: true, message: '不能为空!' }
                  ]}
              >
                <DatePicker />
              </Form.Item>
            </Col>
            <Col span={10} key='3'>
              <Form.Item
                label="结束时间"
                name="endTime"
                rules={[
                  { required: true, message: '不能为空!' }
                  ]}
              >
              <DatePicker  />
              </Form.Item>
            </Col>
            <Col span={10} key='5'>
            <Form.Item label="课程" name="courseName">
                  <Select 
                    placeholder="请选择"
                    mode="tags"
                    optionFilterProp="children"
                    filterOption={(input, option: any) =>
                      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                      filterSort={(optionA, optionB) =>
                        optionA.coruseName
                          .toLowerCase()
                          .localeCompare(optionB.coruseName.toLowerCase())
                      }
                  >
                    {courseName.map((item) => (
                      <Option value={item.id} >
                        {item.name}
                      </Option>
                    ))}
                  </Select>
                </Form.Item>
                </Col>
                <Col span={10} key='5'>
              <Form.Item label="学生" name="userName">
                  <Select placeholder="请选择"
                    mode="tags"
                    optionFilterProp="children"
                    filterOption={(input, option: any) =>
                      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                      filterSort={(optionA, optionB) =>
                        optionA.userName
                          .toLowerCase()
                          .localeCompare(optionB.userName.toLowerCase())
                      }
                  >
                    {userName.map((item) => (
                      <Option value={item.id}>
                        {item.name}
                      </Option>
                    ))}
                  </Select>
                </Form.Item>
                </Col>
            <Col>
            <Form.Item>
              <Button
                style={{marginRight:10}}
                htmlType='submit'
              >确认</Button>
              <Button
              onClick={modelOnCancel}
              >取消</Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
    </>
  )
}
export { EditObject, Edit };
